Named Routes ব্যবহার করে Navigation

Flutter এ Named Routes ব্যবহার করে Navigation করা একটি সাধারণ এবং কার্যকর পদ্ধতি। এটি অ্যাপের স্ক্রিনগুলোর মধ্যে নেভিগেশন (যাতায়াত) সহজ এবং সংগঠিত করে। Named Routes ব্যবহার করে, আপনি সরাসরি একটি নামের মাধ্যমে স্ক্রিনে নেভিগেট করতে পারেন, যা কোডকে পরিষ্কার এবং পড়তে সহজ করে তোলে। নিচে Named Routes ব্যবহার করে Navigation করার ধাপগুলো এবং উদাহরণ আলোচনা করা হলো।

Named Routes কি?

• Named Routes হলো স্ক্রিনের জন্য নির্দিষ্ট নামকরণকৃত পাথ যা অ্যাপের বিভিন্ন অংশে নেভিগেশনের জন্য ব্যবহৃত হয়। প্রতিটি স্ক্রিনের জন্য একটি নির্দিষ্ট নাম সেট করা হয়, এবং যখন সেই স্ক্রিনে যেতে হয়, তখন সেই নাম ব্যবহার করা হয়।
• উদাহরণস্বরূপ, যদি আপনার একটি হোম স্ক্রিন এবং একটি প্রোফাইল স্ক্রিন থাকে, তাহলে তাদের জন্য Named Routes হতে পারে / (হোম স্ক্রিন) এবং /profile (প্রোফাইল স্ক্রিন)।

Named Routes সেটআপ করার ধাপ:

ধাপ ১: MaterialApp এর মধ্যে Routes ডিফাইন করা:

• আপনার অ্যাপের এন্ট্রি পয়েন্টে (যেমন main.dart ফাইল) MaterialApp Widget এ routes প্রপার্টি সেট করুন।
• routes একটি ম্যাপ (Map) যেখানে প্রতিটি Route এর নাম এবং স্ক্রিন Widget এর ম্যাপিং থাকে।

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Named Routes',
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/profile': (context) => ProfileScreen(),
        '/settings': (context) => SettingsScreen(),
      },
    );
  }
}

• initialRoute: এটি অ্যাপটি প্রথম চালানোর সময় কোন Route বা স্ক্রিন দেখানো হবে তা নির্ধারণ করে। এখানে / হলো হোম স্ক্রিন।
• routes: এটি একটি Map, যেখানে প্রতিটি key হলো Route এর নাম (string), এবং value হলো একটি ফাংশন যা একটি Widget রিটার্ন করে।

ধাপ ২: স্ক্রিন তৈরি করা:

• প্রতিটি Route এর জন্য একটি আলাদা স্ক্রিন (Widget) তৈরি করুন।

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Welcome to Home Screen'),
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, '/profile');
              },
              child: Text('Go to Profile'),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, '/settings');
              },
              child: Text('Go to Settings'),
            ),
          ],
        ),
      ),
    );
  }
}

class ProfileScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Profile Screen'),
      ),
      body: Center(
        child: Text('This is the Profile Screen'),
      ),
    );
  }
}

class SettingsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Settings Screen'),
      ),
      body: Center(
        child: Text('This is the Settings Screen'),
      ),
    );
  }
}

• এখানে HomeScreen, ProfileScreen, এবং SettingsScreen নামে তিনটি স্ক্রিন তৈরি করা হয়েছে। প্রতিটি স্ক্রিন Scaffold দিয়ে তৈরি এবং বিভিন্ন UI উপাদান ধারণ করে।

ধাপ ৩: Navigator ব্যবহার করে Named Route এ নেভিগেট করা:

• Navigator.pushNamed(context, '/routeName') ফাংশন ব্যবহার করে আপনি Named Route এ নেভিগেট করতে পারেন।

ElevatedButton(
  onPressed: () {
    Navigator.pushNamed(context, '/profile');
  },
  child: Text('Go to Profile'),
)

• এই উদাহরণে, একটি বাটনে ক্লিক করলে ProfileScreen এ নেভিগেট করা হবে কারণ /profile Route কল করা হয়েছে।

Named Routes ব্যবহার করে একটি সম্পূর্ণ উদাহরণ:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Named Routes Example',
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/profile': (context) => ProfileScreen(),
        '/settings': (context) => SettingsScreen(),
      },
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Welcome to Home Screen'),
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, '/profile');
              },
              child: Text('Go to Profile'),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, '/settings');
              },
              child: Text('Go to Settings'),
            ),
          ],
        ),
      ),
    );
  }
}

class ProfileScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Profile Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

class SettingsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Settings Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

• এখানে HomeScreen থেকে ProfileScreen এবং SettingsScreen এ নেভিগেট করা হয়েছে।
• প্রতিটি স্ক্রিনে Navigator.pop(context) ব্যবহার করে আগের স্ক্রিনে ফিরে যাওয়া যায়।

Named Routes এর সুবিধা:

• কোড পরিষ্কার এবং সংক্ষিপ্ত রাখা যায়, কারণ Route এর নাম ব্যবহার করে স্ক্রিনে নেভিগেট করা হয়।
• বড় অ্যাপ্লিকেশনগুলোতে Route গুলো সংগঠিত করা সহজ।
• Route গুলোর নাম পরিবর্তন করলে অ্যাপের অন্যান্য জায়গায় কোড পরিবর্তনের প্রয়োজন হয় না (কেবল Route ম্যাপে পরিবর্তন করতে হয়)।

সংক্ষেপে, Named Routes ব্যবহারের মাধ্যমে Flutter অ্যাপে সহজে স্ক্রিন নেভিগেশন করা যায়, যা কোডকে ম্যানেজেবল এবং রিডেবল করে তোলে।